<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="数据匹配" name="dataMatching">
        <DataMatching v-if="activeName == 'dataMatching'" />
      </el-tab-pane>
      <el-tab-pane label="人工导入" name="manualImport">
        <ManualImport v-if="activeName == 'manualImport'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
// 数据匹配
import { ref } from "vue";
import DataMatching from "./dataMatching";
// 人工导入
import ManualImport from "./manualImport";

let activeName = ref('dataMatching');
</script>

<style lang="scss" scoped>
.app-container {

  :deep(.el-tabs) {
    >.el-tabs__header .el-tabs__nav {
      border-bottom: 1px solid var(--el-border-color-light);
    }

    .el-tabs__item {
      padding: 0 40px;
      padding-left: 40px!important;
      padding-right: 40px!important;
    }

    .el-tabs__item.is-active {
      color: #FFFF;
      background-color: #8080ff;
      // background-color: #409EFF;
    }
  }
}
</style>